<template>
  <div class="product-details">
    <!-- 顶部导航 -->
    <van-nav-bar 
      :title="productData.name" 
      left-text="返回" 
      left-arrow 
      @click-left="onClickLeft" 
    />

    <!-- 商品图片 -->
    <van-image 
      class="product-image"
      :src="imgArray[0]" 
      @click="showImg"
    />

    <!-- 商品信息 -->
    <div class="product-info">
      <van-row>
        <van-col span="5" class="product-name">
          {{ productData.name }}
        </van-col>
        <van-col span="8" class="product-subtitle">
          {{ productData.subName }}
        </van-col>
        <van-col span="11">
          <div class="rank-info">
            <a href="#" target="_blank" class="rank-item">
              <span class="rank-name">紧凑轿车热门榜</span>
              <span class="rank-number">No.2</span>
              <van-icon name="arrow" />
            </a>
          </div>
        </van-col>
      </van-row>
    </div>

    <!-- 价格信息 -->
    <div class="price-section">
      <div class="price-item">
        <van-tag color="#979aa8" plain size="large">经销商报价</van-tag>
        <van-tag color="#fff">
          <span class="price-value">15.63-18.63 / 元</span>
        </van-tag>
      </div>
      
      <div class="price-item">
        <van-tag color="#979aa8" plain size="large">厂商指导价</van-tag>
        <van-tag color="#fff">
          <span class="price-value">{{ productData.price }}-{{ productData.price }} / 元</span>
        </van-tag>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <van-row justify="center" gutter="20">
        <van-col span="6">
          <div class="action-item share">分享</div>
        </van-col>
        <van-col span="6">
          <div class="action-item favorite">收藏</div>
        </van-col>
        <van-col span="7">
          <div class="action-item price-alert">降价通知</div>
        </van-col>
      </van-row>
    </div>

    <!-- 商品详情 -->
    <div class="product-detail" v-html="productData.brief"></div>

    <!-- 底部操作栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" />
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-icon 
        icon="cart-o" 
        text="购物车" 
        :to="{ name: 'movecrat' }" 
        @click="onShopping" 
      />
      <van-action-bar-icon icon="star" text="收藏" color="#ff5000" />
      <van-action-bar-button 
        type="warning" 
        text="加入购物车" 
        :to="{ name: 'movecrat' }" 
        color="#be99ff" 
      />
      <van-action-bar-button 
        type="danger" 
        text="立即购买" 
        color="#7232dd" 
      />
    </van-action-bar>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'
import { ProductApi } from '@/api'
import { showImagePreview } from 'vant'

// 类型定义
interface ProductData {
  name: string
  subName: string
  img: string
  price: number
  brief: string
}

// 路由实例
const route = useRoute()

// 响应式数据
const id = ref(0)
const imgArray = ref<string[]>([])
const productData = reactive<ProductData>({
  name: '',
  subName: '',
  img: '',
  price: 0,
  brief: ''
})

// 生命周期钩子
onMounted(() => {
  id.value = Number(route.query.id) || 0
  loadProductData()
})

// 加载商品数据
const loadProductData = async () => {
  try {
    const res = await ProductApi.select.call({ id: id.value })
    const product = res[0]
    
    Object.assign(productData, product)
    imgArray.value = product.img.split(',')
  } catch (error) {
    console.error('加载商品数据失败:', error)
  }
}

// 事件处理
const onClickLeft = () => history.back()

const showImg = () => {
  showImagePreview({
    images: imgArray.value,
    startPosition: 0,
    closeable: true
  })
}

const onShopping = () => {
  console.log('购物车')
}
</script>

<style scoped>
.product-details {
  min-height: 100vh;
  background: #f7f8fa;
}

.product-image {
  width: 100%;
  height: 240px;
}

.product-info {
  padding: 15px;
  background: #fff;
}

.product-name {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.product-subtitle {
  font-size: 14px;
  color: #979aa8;
  text-align: center;
  line-height: 24px;
}

.rank-info {
  .rank-item {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px 3px 12px;
    background: #e6e8f2;
    border-radius: 4px;
    color: #1f2129;
    text-decoration: none;
  }

  .rank-name {
    font-size: 12px;
    line-height: 18px;
  }

  .rank-number {
    font-family: D-DIN Exp;
    font-weight: 700;
    font-size: 16px;
    margin: 0 4px 0 8px;
    background-image: linear-gradient(0deg, transparent 2.5px, #897025 0, #ffcc32 6.5px, transparent 0);
  }
}

.price-section {
  padding: 15px;
  background: #fff;
  margin-top: 10px;

  .price-item {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .price-value {
    color: #ff5000;
    font-size: 20px;
    font-weight: 700;
  }
}

.action-buttons {
  padding: 15px;
  background: #fff;
  margin-top: 10px;

  .action-item {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    padding-left: 25px;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .share {
    background-image: url("https://img11.360buyimg.com/img/jfs/t1/185923/19/38125/325/64fad71dFeef526f9/f11f072077880807.png");
  }

  .favorite {
    background-image: url("https://img10.360buyimg.com/img/jfs/t1/102190/6/45012/397/64fad71dF756823e2/d39f976bcb0a7e1f.png");
  }

  .price-alert {
    background-image: url("https://img11.360buyimg.com/img/jfs/t1/143406/40/38936/332/64fad71dF85fe799a/be862fbe6f0efb0d.png");
  }
}

.product-detail {
  padding: 15px;
  background: #fff;
  margin-top: 10px;
  margin-bottom: 50px;
}
</style>
